<template>
  <div class="product-details">
    <div class="top-header">
       <van-nav-bar
        :title="producDetails.productName"
        left-text=""
        right-text="分享"
        left-arrow
        @click-left="onClickLeft"
        @click-right="onClickRight"
        />
    </div>
    <div>
        <van-swipe :autoplay="3000">
          <van-swipe-item v-for="(image, index) in productImgs" :key="index" @click-left="onClickLeft" @click-right="onClickRight">
            <img v-lazy="image" style="width:100%;height:auto" />
          </van-swipe-item>
        </van-swipe >
    </div>
    <div class="component-list-main">
      <div>
        <van-row>
          <van-col span="24"><span class="price"><i class="tag">￥</i>{{producDetails.productShopPrice}}</span></van-col>
          <van-col span="24"><span class="market-price">市场价格：<i class="tag">￥</i>{{producDetails.productMarketPrice}}</span></van-col>
        </van-row>
        <van-row>
          <van-col span="24"><span class="name">{{producDetails.productName}}</span></van-col>
        </van-row>
        <!-- <van-row>
          <van-col span="24">
            <div class="brand">
              品牌：
              <img class="brand-logo" :src="producDetails.productBrand.productBrandLogo"/>
              <span class="brand-name">{{producDetails.productBrand.productBrandName}}</span>
            </div>
          </van-col>
        </van-row> -->
        <van-row>
          <van-col span="24"><span class="keywords">{{producDetails.productKeywords}}</span></van-col>
        </van-row>
      </div>
      <div>
        <img v-for="(image, index) in productDetailsImgs" :src="image" :key="index" style="width:100%;height:100%" />
      </div>
    </div>
   <van-goods-action>
        <van-goods-action-icon
            icon="chat-o"
            text="客服"
        />
        <van-goods-action-icon
            info="0"
            icon="cart-o"
            text="购物车"
        />
        <van-goods-action-icon
            icon="shop-o"
            text="店铺"
        />
        <van-goods-action-button
            type="warning"
            text="加入购物车"
        />
        <van-goods-action-button
            type="danger"
            text="立即购买"
        />
    </van-goods-action>

  </div>
</template>

<script>

export default {
  name: 'productDetails',
  data() {
    return {
      booleanTrue:true,
      booleanFalse:false,
      productSn:null,
      productImgs: [],
      productDetailsImgs: [],
      producDetails:{},

    }
  },
  watch: {},
  created() {
    this.productSn = this.$route.params && this.$route.params.productSn;
    this.initProducDetails();
  },
  methods: {
    initProducDetails(){
      var _self=this;
      let params={productSn:_self.productSn};
      let encryptParams=params;
      _self.$store.commit('setEncrypt',encryptParams);
      _self.$store.dispatch('producDetails',params).then(response => {
       // _self.$toast('数据加载完毕');
        _self.producDetails=response;
                console.log(response,_self.producDetails.productImgs.split(";"));

        _self.productImgs=_self.producDetails.productImgs.split(";")
        _self.productDetailsImgs=_self.producDetails.productLongDesc.split(";")
        }).catch(() => {
        })
    },
     onClickLeft() {
         console.log(1111)

       this.$router.go(-1)
    },
    onClickRight() {
      Toast('按钮');
    }

  }
}
</script>

<style rel="stylesheet/scss" lang="scss">
  .price{
    display: block;
    padding: 6px 10px 0 10px;
    color: #e4393c;
    font-weight: 700;
    line-height: 1.3;
    font-size: 24px;
    .tag{
      font-size: 14px;
      font-style: normal;
    }
  }
  .market-price{
    display: block;
    padding: 0 10px;
    color: #999;
    font-size: 12px;
    margin-bottom: 5px;
    .tag{
      font-size: 14px;
      font-style: normal;
    }
  }
  .name{
    display: block;
    padding: 0 10px;
    font-weight: 700;
    line-height: 24px;
    font-size: 16px;
    color: #333;
  }
  .keywords{
    display: block;
    height: 35px;
    line-height: 35px;
    background: #fbf0fd;
    padding: 0 30px 0 10px;
    font-size: 14px;
    color: #662d99;
  }
</style>

